<template>
    <PageLayout :title="title">
		<EditLayout @confirm="handlerSave">
			<view class="input-form-box">
				<up-form labelWidth="100" labelAlign="right" labelPosition="left"
					     :model="aaItemData" ref="form1" >       
                    <up-form-item label="账单描述" prop="title">
						<up-input v-model="aaItemData.title" placeholder="请填写账单描述"
							      borderBottom border="none"></up-input>
					</up-form-item>
					<up-form-item label="支付日期" prop="payDate">
						<QueryFormItem type="date" dateMode="date" dateFormat="YYYY-MM-DD" placeholder="请选择支付日期" v-model="aaItemData.payDate" 
                                       border="none" title="支付日期"></QueryFormItem>
					</up-form-item>
                    <up-form-item label="付款人员" prop="payer_desc">
						<QueryFormItem type="select" placeholder="请选择付款人员" v-model="aaItemData.payer_desc" 
                                       border="none" title="付款人员选择" allowCutsom :url="api.project.userList()" 
									   method="GET" :afterRequest="queryFormAfterRequest" 
									   labelKey="nickname" valueKey="id" @confirm="(data)=>queryConfirm('payer',data)"></QueryFormItem>
					</up-form-item>
                    <up-form-item label="所属成员组" prop="payGroupId_desc">
						<QueryFormItem  type="select" placeholder="请选择所属成员组" v-model="aaItemData.payGroupId_desc" :url="api.project.groupList()"
									   method="GET" border="none" title="成员组选择" :afterRequest="queryFormAfterRequest"
									   labelKey="name" valueKey="id" @confirm="(data)=>queryConfirm('payGroupId',data)"></QueryFormItem>
					</up-form-item>
                    <up-form-item label="金额" prop="price">
						<up-input type="digit" v-model="aaItemData.price" placeholder="请输入金额"
							      borderBottom border="none"></up-input>
					</up-form-item>
                    <up-form-item label="备注" prop="remask">
                        <up-textarea v-model="aaItemData.remask" placeholder="输入备注" count 
                                     border="none"></up-textarea>
					</up-form-item>
				</up-form>
			</view>
		</EditLayout>
    </PageLayout>
</template>

<script lang="ts" setup>
    import EditLayout from '../../../components/myLayout/EditLayout.vue';
    import PageLayout from '../../../components/myLayout/PageLayout.vue';
    import QueryFormItem from '../../../components/QueryFormItem.vue'
    import {getCurrentInstance, onMounted, ref} from "vue"
	import api from '../../../http/api';
	import { ProjectDetailAddReq, ProjectDetailGetReq, ProjectDetailUpdReq } from '../../../http/projectDetails';
	import { FormatDate } from '../../../utils/utils';
import { useProjectStore } from '../../../store/projectStore';
import { useUserStore } from '../../../store/userStore';
	
	const instance=getCurrentInstance()?.proxy

	const {project}=useProjectStore()
	const {user}=useUserStore()
	
	const eventChannel=instance.getOpenerEventChannel()
	
    const aaItemData=ref({})
	
	const title=ref("修改账目")
	
    const handlerSave=async ()=>{
		console.log(aaItemData.value)
		const id=aaItemData.value.id
		let res={}
		if(id && id>0){
			res=await ProjectDetailUpdReq(aaItemData.value)
		}else{
			res=await ProjectDetailAddReq(aaItemData.value)
		}
		eventChannel.emit("refresh")
		uni.navigateBack()
    }
	
	const queryFormAfterRequest=(res)=>{
		return res.data.list
	}

	const queryConfirm=(field,data)=>{
		aaItemData.value[field]=data.value
		aaItemData.value[field+"_desc"]=data.label
	}
	
	onMounted(()=>{
		eventChannel.on("editData",(data)=>{
			if(data.id<0){
				title.value="新增账目"
				aaItemData.value={
					payDate:FormatDate(new Date(),'YYYY-MM-DD') ,
					payGroupId:project.projectUser.defalutGroupId,
					payGroupId_desc:project.projectUser.defalutGroupId_desc,
					payer_desc:user.nickname,
					payer:user.id
				}
				console.log(aaItemData.value)
			}else{
				aaItemData.value.id=data.id
				ProjectDetailGetReq({id:data.id}).then(res=>{aaItemData.value=res.data})
			}
		})
	})


</script>

<style lang="scss">

    .input-form-box{
        margin:0 20upx;
    }

</style>